<template>
  <div>
    <el-tabs type="border-card" v-model="tabsIndex" @tab-click="changeTab">
      <el-tab-pane v-for="(tabItem,index) in tabList" :key="tabItem.name" :label="tabItem.label">
        <div style="margin-bottom: 20px">
          <el-tag :disable-transitions="false">{{ tagName }}</el-tag>
        </div>
        <image-upload v-model="tabItem.imgList" :limit="0" :isShowTip="false" @deleteImg="deleteImg"></image-upload>

        <div style="display: inline-flex;margin-right: 10px" v-for="(imgItem,index) in tabItem.imgList" :key="index">
          <!--          <image-preview :src="imgItem" width="120px" height="120px"></image-preview>-->
        </div>
        <pagination v-show="tabItem.imgTotal>0" :total="tabItem.imgTotal" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    :pageSize="[40, 60, 80]"
                    @pagination="getAtlasList"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {getAtlasList, getTagList, deleteImage} from "@/api/picture/picture";

export default {
  name: "pictureView",
  data() {
    return {
      tagList: [],
      atlasList: [],
      tagName: "",
      tabsIndex: 0,
      queryParams: {
        tagId: "",
        atlasType: "",
        pageSize: 40,
        pageNum: 1
      },
      tabList: [
        {
          label: "轮播图", // 标签名称
          name: "0", //标签唯一值
          imgList: [],
          imgTotal: 0
        },
        // {
        //   label: "营销图",
        //   name: "1",
        //   imgList: [],
        //   imgTotal: 0
        // },
        {
          label: "详情图",
          name: "2",
          imgList: [],
          imgTotal: 0
        },
      ], // 选项卡列表
    }
  },
  created() {
    this.queryData = this.$route.query
    this.getTagList()
  },
  methods: {
    deleteImg(e) {
      console.log('e', e)
      deleteImage(e.name).then(response => {
        this.$modal.msgSuccess("删除成功");
      });
    },
    // 获取标签列表
    getTagList() {
      getTagList().then(response => {
        this.tagList = response.data
        this.getAtlasList()
      });
    },
    // 切换tab选项卡
    changeTab() {
      this.getAtlasList()
    },
    // 获取图片回显信息
    getAtlasList() {
      this.queryParams.tagId = this.queryData.atlasTagId
      this.queryParams.atlasType = this.tabsIndex
      getAtlasList(this.queryParams).then(response => {
        let list = response.rows
        let imgList = [], tagList = []
        this.imgList = list
        console.log('&&&', list)
        if (list && list.length > 0) {
          for (let i = 0; i < list.length; i++) {
            if (list[i].atlasType == this.tabsIndex) {
              this.tabList[this.tabsIndex].imgList = list
              this.tabList[this.tabsIndex].imgTotal = response.total
            }
          }
        }
        for (let j = 0; j < this.tagList.length; j++) {
          if (list[0].tagId == this.tagList[j].id) {
            this.tagName = this.tagList[j].tagName
          }
        }
      });
    },
  }
}
</script>

<style scoped>

</style>
